<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('指标标签列表')" />
    <th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <input type="hidden" th:value="${dw.idDw}" id="idDw">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>名称：</label>
                            <input disabled type="text" name="na" th:value="${dw.na}"/>
                        </li>
                        <li>
                            <label>表：</label>
                            <input disabled type="text" name="na" id="tableName" th:value="${dw.cdTb}"/>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12">
            <div class="col-md-5" style="background-color: #fff;min-height:550px;margin-top: 10px"> <!--style="font-size:16px;margin-top:6px;"-->
                <div class="tabs-container" style="margin-top: 5px">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-8">表字段</a>
                        </li>
                    </ul>
                    <div class="tab-content ">
                        <table id="fld-table" class="table table-bordered">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-7" >
                <div class="row" style="margin-left:2px">
                    <div class="col-sm-12 search-collapse">
                        <form id="">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="showDetailPage('detail')"><i class="fa fa-search"></i>明细数据</a>
                                        <a class="btn btn-info btn-rounded btn-sm" onclick="showDetailPage('statistics')"><i class="fa fa-tag"></i>汇总数据</a>
                                        <a class="btn btn-success btn-rounded btn-sm" onclick="export2()"><i class="fa fa-download"></i>&nbsp;导出</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>

                    <div class="col-sm-12 select-table table-striped wrap1" style="min-height:470px;text-align: center" id="tableDiv">
                        <div class="form-group" >
                            <label class="col-sm-5 control-label" id="tableParam" style="text-align-last: left"></label>
                            <div class="col-sm-5" id="radioButtonDiv">
                                <label class="checkbox-inline">
                                    <input type="radio" name="chartType" value="table" id="inlineCheckbox1" checked>表格</label>
                                <label class="checkbox-inline">
                                    <input type="radio" name="chartType" value="line" id="inlineCheckbox2">折线</label>
                                <label class="checkbox-inline">
                                    <input type="radio" name="chartType" value="bar" id="inlineCheckbox3">柱图</label>
                                <label class="checkbox-inline">
                                    <input type="radio" name="chartType" value="pie" id="inlineCheckbox4">饼图</label>
                            </div>
                        </div>
                        <table id="tableExecList" class="table table-bordered">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                        <div id="chartDiv" style="width: 700px;height:470px;display: none;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="myModal6" style="width: 80%" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">图形参数配置</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="form3" style="margin-top: 20px">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">图形：</label>
                        <div class="col-sm-9">
                            <select name="chartType" id="chartTypeSelect" onchange="chartChange()" class="form-control" >
                                <option value="table">表格</option>
                                <option value="pie">饼图</option>
                                <option value="bar">柱图</option>
                                <option value="line">折线图</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="titleDiv">
                        <label class="col-sm-3 control-label">标题：</label>
                        <div class="col-sm-9">
                            <input name="title" id="title" class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group" id="titlePositionDiv">
                        <label class="col-sm-3 control-label">标题位置：</label>
                        <div class="col-sm-9">
                            <select name="titlePosition" id="titlePosition" class="form-control" >
                                <option value="leftTop">左上角</option>
                                <option value="center">居中</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="legendPositionDiv">
                        <label class="col-sm-3 control-label">图例：</label>
                        <div class="col-sm-9">
                            <select name="legendPosition" id="legendPosition" class="form-control" >
                                <option value="">无需显示</option>
                                <option value="up">上</option>
                                <option value="down">下</option>
                                <option value="left">左</option>
                                <option value="right">右</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="x1" style="display: none">
                        <label class="col-sm-3 control-label">X轴：</label>
                        <div class="col-sm-6">
                            <select id="xFieldName" class="form-control selectFlds" >
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <input id="xNum" class="form-control" type="text" placeholder="数量"/>
                        </div>
                    </div>
                    <div class="form-group" id="y1" style="display: none">
                        <label class="col-sm-3 control-label">Y1轴：</label>
                        <div class="col-sm-5">
                            <select id="y1FieldName" class="form-control selectFlds" >
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="y1Position" class="form-control" >
                                <option value=>靠左</option>
                                <option value=>靠右</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select name="chartType" id="y1ChartType" class="form-control" >
                                <option value=></option>
                                <option value=>柱图</option>
                                <option value=>折线图</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="y2" style="display: none">
                        <label class="col-sm-3 control-label">Y2轴：</label>
                        <div class="col-sm-5">
                            <select id="y2FieldName" class="form-control selectFlds" >
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="y2Position" class="form-control" >
                                <option value=>靠左</option>
                                <option value=>靠右</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select name="chartType" id="y2ChartType" class="form-control" >
                                <option value=></option>
                                <option value=>柱图</option>
                                <option value=>折线图</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="y3" style="display: none">
                        <label class="col-sm-3 control-label">Y3轴：</label>
                        <div class="col-sm-5">
                            <select id="y3FieldName" class="form-control selectFlds" >
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="y3Position" class="form-control" >
                                <option value=>靠左</option>
                                <option value=>靠右</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select name="chartType" id="y3ChartType" class="form-control" >
                                <option value=></option>
                                <option value=>柱图</option>
                                <option value=>折线图</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="rowToColFldGroup">
                        <label class="col-sm-3 control-label">行转列字段：</label>
                        <div class="col-sm-9">
                            <select class="form-control selectFlds" data-none-selected-text="行转列字段" name="rowToColFld" id="rowToColFld">

                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="showFldsGroup">
                        <label class="col-sm-3 control-label">显示列：</label>
                        <div class="col-sm-9">
                            <select class="form-control select2-multiple selectFlds" multiple data-none-selected-text="指标选择" name="showFlds" id="showFlds">
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="showFldsScaleGroup">
                        <label class="col-sm-3 control-label">显示列比例：</label>
                        <div class="col-sm-9">
                            <input name="showFldsScale" class="form-control" type="text" id="showFldsScale"/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="showChartData()">保存</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "base/label";
    var global_dw_query_param="";
    var getChartStyleParam = function () {
        var queryDataParam = global_dw_query_param;
        if(queryDataParam==null) {
            return null;
        }
        var chartType = $("#chartTypeSelect").val();
        var styleParam={"title":$("#title").val(),"titlePosition":$("#titlePosition").val(),"legendPosition":$("#legendPosition").val(),"chartType":chartType};
        if(chartType=="table") {
            styleParam.showFlds = $("#showFlds").val();
            styleParam.showFldsScale = $("#showFldsScale").val();
            styleParam.rowToColFld = $("#rowToColFld").val();
        } else {
            var xFieldName = $("#xFieldName").val();
            var y1FieldName = $("#y1FieldName").val(),y2FieldName = $("#y2FieldName").val(),y3FieldName = $("#y3FieldName").val();
            if(xFieldName==null) {
                $.modal.alertError("X轴字段必选");
                return null;
            }
            if(y1FieldName==null) {
                $.modal.alertError("Y1轴字段必选");
                return null;
            }
            styleParam.chartXVO = {"fieldName":xFieldName,"num":$("#xNum").val()};
            var y1 = {"fieldName":y1FieldName,"chartType":$("#y1ShapeType").val()};
            var yStype = [];
            yStype.push(y1);
            if(y2FieldName!=null) {
                var y2 = {"fieldName":y2FieldName,"chartType":$("#y2ShapeType").val()};
                yStype.push(y2);
            }
            if(y3FieldName!=null) {
                var y3 = {"fieldName":y3FieldName,"chartType":$("#y3ShapeType").val()};
                yStype.push(y3);
            }
            styleParam.chartYVOList = yStype;
        }
        var param = {"chartStyleVO":styleParam,"dwQueryParamVO":queryDataParam};
        return param;
    }
    function showChartData() {
        var param = getChartStyleParam();
        if(param==null) {
            return;
        }
        $.ajax({
            url: ctx+'base/etl/chart/dwCommon',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(param),
            success: function (result) {
                if(result.code==0) {
                    $("#myModal6").modal("hide");
                    var chartType = $("#chartTypeSelect").val();
                    var data = result.data;
                    if(chartType=="table") {
                        showTableData(data.data);
                        $("#tableExecList").show();
                        $("#chartDiv").hide();
                    } else {
                        var echartsInstance=echarts.init(document.getElementById("chartDiv"));
                        echartsInstance.setOption(eval('(' + data.data + ')'));
                        $("#tableExecList").hide();
                        $("#chartDiv").show();
                    }
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }
    function fldLoadSuccess(data) {
        debugger;
        var options="<option></option>";
        $.each(data,function (index,item) {
            options += "<option value='"+index+"'>"+item+"</option>";
        });
        $(".selectFlds").html(options);
    }
    function showDetailPage(type) {
        if(type=='detail') {
            var rows = $("#fld-table").bootstrapTable('getSelections');
            if(rows.length<1) {
                $.modal.alertError("请先选择要显示的字段");
                return;
            }
        }
        var idDw=$("#idDw").val();
        var options = {
            title: '查询参数',
            width: "900",
            url: ctx + "base/etl/query/dw/showParam?idDw="+idDw+"&type="+type,
            callBack: searchDataCallBack
        };
        $.modal.openOptions(options);
    }
    function searchDataCallBack(index, layero) {
        var iframeWin = layero.find('iframe')[0];
        var param = iframeWin.contentWindow.submitHandler(index, layero);
        var dims = [];
        var rows = $("#fld-table").bootstrapTable('getSelections');
        var fgDetail = param.fgDetail;
        var groupFlds = param.groupFlds;
        var sumFlds = param.sumFlds;
        var groupBy="";
        if(rows.length>0) {
            var i;
            $.each(rows,function (index,item) {
                if(!fgDetail) {
                    if((i=$.inArray(item.idPubfld,groupFlds))>-1) {
                        groupFlds.splice(i, 1);;
                        dims.push({"idPubfld":item.idPubfld,"filter":item.filter});
                        //groupBy+=item.idPubfld+",";
                    }
                } else {
                    dims.push({"idPubfld":item.idPubfld,"filter":item.filter});
                }
            });

            $.each(sumFlds,function (i,t) {
                if(t=="count(*)") {
                    dims.push({"idPubfld":t,"alias":"VALUE_DES"});
                } else {
                    dims.push({"idPubfld":"sum("+t+")","alias":t});
                }
            });
        }
        $.each(groupFlds,function (index,item) {
            dims.push({"idPubfld":item});
        });

        $("#tableParam").html(param.startDay+"~"+param.endDay+"<span style='color: #ff0000'>（最多显示50条）</span>");
        param.dimVOList=dims;
        param.tableName = $("#tableName").val();
        // param.groupBy = groupBy.length>0?groupBy.substring(0,groupBy.length-1):"";
        global_dw_query_param = param;
        $.ajax({
            url: ctx+'base/etl/query/dw/commonDwQuery',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify(param),
            success: function (result) {
                if(result.code==0) {
                    var chartType = "table";
                    var data = result.data;
                    debugger;
                    fldLoadSuccess(data.thead);
                    if(chartType=="table") {
                        var tbody = data.tbody;
                        var thead = data.thead;
                        var html="<tr>";
                        var theads =[],theadsKey=[];
                        $.each(thead,function(index,item) {
                            html+="<th>"+item+"</th>";
                            theads.push(item);
                            theadsKey.push(index);
                        });
                        $("#tableExecList thead").html(html+"</tr>");
                        html="";

                        for(var i=0;i<tbody.length;i++) {
                            html+="<tr>";
                            var trData = tbody[i];
                            for(var j=0;j<theadsKey.length;j++) {
                                html+="<td>"+(trData[theadsKey[j]]==undefined?0:trData[theadsKey[j]])+"</td>";
                            }
                            html+="</tr>";
                        }
                        $("#tableExecList tbody").html(html);
                        $("#tableExecList").show();
                        $("#chartDiv").hide();
                    } else {
                        var echartsInstance=echarts.init(document.getElementById("chartDiv"));
                        echartsInstance.setOption(eval('(' + data.data + ')'));
                        $("#tableExecList").hide();
                        $("#chartDiv").show();
                    }
                    if(fgDetail) { //汇总数据才能显示图样
                        $("#radioButtonDiv").hide();
                    } else {
                        $("#radioButtonDiv").show();
                    }
                } else {
                    $.modal.alertError(msg.msg);
                }
            }
        });
        $.modal.close(index);
    }
    function chartChange(chartType) {
        $("#chartTypeSelect").val(chartType);
        if(chartType=="table") {
            $("#x1").hide();
            $("#y1").hide();
            $("#y2").hide();
            $("#y3").hide();
            $("#titleDiv").hide();
            $("#titlePositionDiv").hide();
            $("#legendPositionDiv").hide();
            $("#showFldsGroup").show();
            $("#showFldsScaleGroup").show();
            $("#rowToColFldGroup").show();
        } else if(chartType=="pie"){
            $("#x1").show();
            $("#y1").show();
            $("#y2").hide();
            $("#y3").hide();
            $("#showFldsGroup").hide();
            $("#showFldsScaleGroup").hide();
            $("#rowToColFldGroup").hide();
            $("#titleDiv").show();
            $("#titlePositionDiv").show();
            $("#legendPositionDiv").show();
        } else {
            $("#x1").show();
            $("#y1").show();
            $("#y2").show();
            $("#y3").show();
            $("#titleDiv").show();
            $("#titlePositionDiv").show();
            $("#legendPositionDiv").show();
            $("#showFldsGroup").hide();
            $("#showFldsScaleGroup").hide();
            $("#rowToColFldGroup").hide();
        }
    }
    $(function() {
        $("#radioButtonDiv").hide();
        $("input[name='chartType']").click(function () {
            var chartType = $(this).val();
            chartChange(chartType);
            $("#myModal6").modal("show");
        });
        $("#fld-table").bootstrapTable({
            data: [[${tbFlds}]],
            columns: [{
                checkbox: true
            },
                {
                    field: 'idTbFld',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'naPubfld',
                    title: '名称'
                },
                {
                    field: 'filter',
                    title: '过滤条件',
                    editable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.idPubfld.startsWith("ID_DIM_")) {
                            actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="lookDimData(\'' + row.cdTbDim + '\')"><i class="fa fa-list-ul"></i>查看</a> ');
                        }
                        return actions.join('');
                    }
                }]
        });
    });
</script>
</body>
</html>